<script setup lang="js">
import { reactive, ref } from 'vue'
const red = { color: 'red' };
const blue = { color: 'blue' };
const refColor = ref({ type: red })

function changeColor1() {
  if (refColor.value.type === reactive(red)) {
    refColor.value.type = reactive(blue)
  } else if (refColor.value.type === reactive(blue)) {
    refColor.value.type = red
  }
}

function changeColor2() {
  if (refColor.value.type === ref(red)) {
    refColor.value.type = ref(blue)
  } else if (refColor.value.type === ref(blue)) {
    refColor.value.type = red
  }
}

function reset() {
  red.color = 'red';
  blue.color = 'blue';
}
</script>

<template>
  <div class="q-pa-6">
    <q-banner class="bg-purple-4 text-white text-center mb-8">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <h3 class="text-xl text-center font-bold mb-4">作业九</h3>
      <div class="row justify-center gap-4">
        <q-btn @click="changeColor1" color="primary" rounded-full label="Change1" />
        <q-btn @click="changeColor2" color="secondary" rounded-full label="Change2" />
        <q-btn @click="reset" color="negative" rounded-full label="重置" />
      </div>
    </div>

    <q-card class="q-ma-auto" style="max-width: 500px;">
      <q-card-section>
        <p class="text-lg mb-2"><strong>red变量值：</strong>{{ red }}</p>
        <p class="text-lg mb-2"><strong>blue变量值：</strong>{{ blue }}</p>
        <p class="text-lg"><strong>refColor变量值：</strong>{{ refColor }}</p>
      </q-card-section>
    </q-card>
  </div>
</template>
<style scoped>

</style>
